<template>
	<div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px">
			<div class="search-s page-public-s" style="box-sizing: border-box">
				<el-card shadow="never" :body-style="{ paddingBottom: '0' }">
					<el-form class="box-f" ref="queryForm" :inline="true">
						
						<el-form-item>
							<el-button v-if="$hasPer('inventory7:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</div>

			<div style="box-sizing: border-box" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100">
									<el-table ref='excelRef' :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
										<el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="友商名称" align="center">
											<el-table-column :show-overflow-tooltip="true" min-width="120" align="center">
                                                <template #header>
													<SearchModel typeId="providerName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
                                                <template #default="{ row }">
                                                    {{ row.providerName }}
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

										<el-table-column min-width="140" :show-overflow-tooltip="true" label="危化品名称" align="center">
											<el-table-column :show-overflow-tooltip="true" min-width="120" align="center">
                                                <template #header>
													<SearchModel typeId="chemicalName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
                                                <template #default="{ row }">
                                                    {{ row.chemicalName }}
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

										<el-table-column min-width="80" :show-overflow-tooltip="true" prop="num" label="数量" align="center" />
										<el-table-column min-width="80" :show-overflow-tooltip="true" prop="unit" label="单位" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="productBatchId" label="产品批号" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="locationName" label="存储位置" align="center" />

										<el-table-column min-width="180" label="操作" align="center" fixed="right">
											<el-table-column min-width="180" align="center">
												<template #header>
													<el-button @click="searchClick" icon="ele-Search" type="primary" text> 查询 </el-button>
													<el-button @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
												</template>
												<template #default="{ row }"> <div>-</div> </template>
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue';
import getTableData from '/@/utils/getTableData';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
import { getStocksDangerousChemicalsApi } from '/@/api/sms/HazardousChemicalsInterface';
import SearchModel from '/@/views/sms/component/search-model.vue';
import { exportToExcel } from '/@/utils/exportToExcel';
import { ElMessage } from 'element-plus';
export default defineComponent({
	name: 'friend-merchant-manage',
	components: {
		SearchModel,
	},
	setup(props) {
		const { proxy } = useCurrentInstance();
		const $t = proxy.$t;

		/***** 变量 *****/
		const transferVal1 = ref(); // 需要查询的值
		const transferVal2 = ref(); // 需要查询的值
		const showDialogVisible = ref(false);
		let searchObj: any = reactive({});
		/***** searchClick 查询按钮 *****/
		const searchClick = () => {
			// searchObj.Name = transferVal1.value;
			// searchObj.V_ProvideName = transferVal2.value;
            let newObj = Object.keys(searInfo.value);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = searInfo.value[i];
                });
            }
		};

		const resetClick = () => {
            searInfo.value = {};
            let newObj = Object.keys(searchObj);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
					// console.log(i);
                });
            }
			initInfoFun();
		};

        /*** 初始化数据 */
		const basicsInfo: any = ref([]);
		const initInfoFun = () => {
			basicsInfo.value = [
				{
					typeId: 'chemicalName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'Name', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '危化品名称', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
				},
                {
					typeId: 'providerName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'V_ProvideName', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '友商名称', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
				},
			];
		};

		const searInfo: any = ref();
		const searchHandel = (val: any) => {
			searInfo.value = val;
		};

        onMounted(() =>{
            initInfoFun()
        })

		  /*** ================================= 导出数据函数操作 ================================= */
		  const excelRef: any = ref(null);
        const handleExport = () => {
            if(excelRef.value){
                if(excelRef.value.data.length !== 0){
                    let tableExcel: any = [];
                    let tableArr = excelRef.value.data;
                    tableArr.map((item: any) => {
                        let tableObj: any = {};
                        tableObj['友商名称'] = item.providerName ? item.providerName : '-';
                        tableObj['危化品名称'] = item.chemicalName ? item.chemicalName : '-';
						tableObj['数量'] = item.num ? item.num : '-';
						tableObj['单位'] = item.unit ? item.unit : '-';
                        tableObj['产品批号'] = item.productBatchId ? item.productBatchId : '-';
                        tableObj['存储位置'] = item.locationName ? item.locationName : '-';

                        tableExcel.push(tableObj);
                    });
                    exportToExcel(tableExcel,'危化品库存.xlsx');
                }else{
                    ElMessage({
                        type: 'error',
                        message: '暂无数据导出',
                    })
                }
            }
        }

		return {
			...getTableData(getStocksDangerousChemicalsApi, {}, searchObj),
			searchClick,
			transferVal1,
			transferVal2,
			showDialogVisible,
			resetClick,
            searchHandel,
            basicsInfo,
			handleExport,excelRef
		};
	},
});
</script>
<style lang="scss">
@import '../style/public.scss';
</style>
<style scoped lang="scss">
#friend-merchant-manage {
	.box-f {
		:deep(.el-form-item__label) {
			padding: 0;
		}
	}
	:deep(.el-card__body) {
		height: 100%;
	}
	:deep(.el-card) {
		border: none !important;
	}
	.upload-demo {
		margin-left: 12px;
		margin-top: 2px;
	}
	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}
	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}
}
</style>
